<template>
    <div class="right_content">
        <el-form :inline="true" size="small" :model="formInline">
            <el-form-item label="作业名称">
                <el-input v-model="formInline.workName" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="作业状态">
                <el-select v-model="formInline.state" style="width: 150px" placeholder="请选择" clearable>
                    <el-option label="待发布" value="0" />
                    <el-option label="已发布" value="1" />
                    <el-option label="已过期" value="2" />
                </el-select>
            </el-form-item>
            <el-form-item label="题目类型">
                <el-select v-model="formInline.type" placeholder="请选择" clearable style="width: 150px">
                    <el-option label="题库选题" value="0" />
                    <el-option label="自定义文件" value="1" />
                </el-select>
            </el-form-item>
            <el-form-item label="时间范围">
                <el-date-picker v-model="formInline.time" type="daterange" range-separator="到" start-placeholder="开始时间"
                    end-placeholder="结束时间" size="small" format="YYYY/MM/DD" value-format="x" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>

        </el-form>
        <div class="opt_btn">
            <el-button type="primary" size="small" @click="importShow = true">导入作业</el-button>

            <el-button type="primary" size="small" @click="show = true">发布作业</el-button>
        </div>
        <!-- 表格 -->
        <el-table ref="singleTableRef" tooltip-effect="dark" :data="tableData" highlight-current-row border stripe
            align="center" size="small" style="width: 100%" v-loading="loading">
            <el-table-column type="index" label="序号" align="center" width="50" />
            <el-table-column property="workName" label="作业名称" align="center" />
            <el-table-column type="createTime" label="发布时间" align="center" width="150">
                <template v-slot="{ row }">
                    <div class="content">
                        {{ formatData(row.createTime) }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column property="type" label="作业类型" width="100" align="center">
                <template v-slot="{ row }">
                    <div class="content">
                        {{ row.type == 0 ? '题库选题' : '自定义文件' }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column property="submissionRate" label="提交率" align="center" width="80">
                <template v-slot="{ row }">
                    <div class="content">
                        {{ row.submissionRate }}%
                    </div>
                </template>
            </el-table-column>
            <el-table-column property="averageGrade" label="平均成绩" align="center" width="50">
                <template v-slot="{ row }">
                    <div class="content">
                        {{ row.averageGrade }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column property="deadlineTime" label="截止时间" align="center" width="150">
                <template v-slot="{ row }">
                    <div class="content">
                        {{ formatData(row.deadlineTime) }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column property="state" label="状态" align="center" width="80">
                <template v-slot="{ row }">
                    <div class="content" v-if="row.state == 1" style="color: #67C23A;">已发布</div>
                    <div class="content" v-if="row.state == 0" style="color: rgb(6 199 230);">待发布</div>
                    <div class="content" v-if="row.state == 2" style="color: red;">已过期</div>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="280">

                <template #default="{ row }">
                    <el-button type="success" size="small"
                        @click="PreviewHomework(row.id, row.type, row.workUrl)">预览</el-button>
                    <el-button type="success" size="small" @click="workRelease(row.id)"
                        :disabled="row.state == 1">发布</el-button>
<!--                    <el-button type="success" size="small">编辑</el-button>-->
                    <el-button type="danger" size="small" v-if="row.state != 1"
                        @click="deleteJob(row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="page">
            <Pagination @getDate="getJobInfo" :queryNum="queryCount" />
        </div>
        <!-- 导入作业 -->
        <PublishJobDia v-model:show="importShow" :courseId="props.courseId" @onSubmit="onSubmit" />
        <!-- 题库选择 -->
        <QuestionBankImportDia v-model:show="show" :courseId="props.courseId" @onSubmit="onSubmit">
        </QuestionBankImportDia>
        <!-- 预览自定义文件 -->
        <CustomCorrectionDia v-model:show="showFile" :iframeUrl="iframeUrl" />
    </div>
</template>

<script setup>
import { ref, reactive } from "vue"
const props = defineProps(['courseId'])
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();

import useUserInfo from "store/useUserInfo.js";
const useUserInfoStore = useUserInfo();
import { storeToRefs } from 'pinia'
const { userInfo } = storeToRefs(useUserInfoStore)

import Pagination from "@/components/base/MyPagination.vue";
import PublishJobDia from '@/views/teacher/mycourse/dialog/PublishJobDia'
import QuestionBankImportDia from '@/views/teacher/mycourse/dialog/QuestionBankImportDia'
import CustomCorrectionDia from '@/views/teacher/mycourse/dialog/CustomCorrectionDia'

import { getHomeworkListApi, publishHomeworkApi, deleteHomeworkApi } from "@/api/index";

const formInline = reactive({
    workName: '',
    state: '',
    type: '',
    time: null
})
// 格式化时间
const formatData = (cellValue) => {
    var s = new Date(cellValue).toLocaleString();
    return s;
};
// 分页用
const queryCount = ref(1);
const tableData = ref([
])

const onSubmit = () => {
    queryCount.value += 1;
}
const loading = ref(false)
// 发布作业
const show = ref(false);


// 导入作业
const importShow = ref(false);

// 获取作业信息
const getJobInfo = async (page) => {
    loading.value = true
    const params = {
        courseId: props.courseId,
        pageNum: page.pageNum,
        pageSize: page.pageSize,
    }
    for (const key in formInline) {
        if (formInline[key] != null && formInline[key] !== "" && key !== "time") {
            params[key] = formInline[key];
        } else if (formInline.time && formInline.time.length !== 0) {
            params.startTime = formInline.time[0];
            params.endTime = formInline.time[1];
        }
    }
    const res = await getHomeworkListApi(params)
    loading.value = false;
    if (res.code !== "10000") {
        ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
        });
        return;
    }
    ElMessage({
        showClose: true,
        message: `查询成功!`,
        type: "success",
    });
    tableData.value = res.data.list || [];
    page.totalCount = res.data.totalCount;
}

// 发布作业
const workRelease = (id) => {
    ElMessageBox.confirm(
        '你确定要发布这份作业吗?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            const res = await publishHomeworkApi({
                id: id,
                operatorId: userInfo.value.userId
            })
            if (res.code !== "10000") {
                ElMessage({
                    showClose: true,
                    message: res.message,
                    type: "error",
                })
                return
            }
            ElMessage({
                type: 'success',
                message: '发布成功!',
            })
            onSubmit()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '你取消了发布。',
            })
        })
}

// 删除作业

const deleteJob = async (id) => {
    ElMessageBox.confirm(
        '你确定要删除这份作业吗?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            const res = await deleteHomeworkApi(
                id
            )
            if (res.code !== "10000") {
                ElMessage({
                    showClose: true,
                    message: res.message,
                    type: "error",
                })
                return
            }
            ElMessage({
                type: 'success',
                message: '删除成功!',
            })
            onSubmit()
        })
}

const showFile = ref(false)
const iframeUrl = ref(null)

// 预览作业
const PreviewHomework = (id, t, answerUrl) => {
  console.log("进来了吗"+answerUrl)
  console.log("进来了吗"+t)
  console.log("进来了吗"+id)
    if (t == 1) {
        iframeUrl.value = answerUrl;
        showFile.value = true;
        return
    }
    router.push({
        name: "PreviewHomework", params: {
            id,
            type: 3
        }
    });
}

</script>

<style lang="scss" scoped></style>